<template>
  <div>
    <!-- 全屏的时候知识点标签 -->
    <div v-transfer-dom v-if="knowledgePoints.length > 0 && hasPermission" @click="seeKnowledgePoint"
      :class="[screenStatus == 1 ? 'hide' : screenStatus == 3 ? 'c-rotate90' : screenStatus == 4 ? 'c-rotate180' : screenStatus == 5 ? 'c-rotate270' : '', screenStatus == 2 ? (showQrNotFollow || showQrHasFollow ? 'c-p-r100' : 'c-p-r24') : screenStatus == 4 ? 'right400' : screenStatus == 5 ? 'c-p-r60' : 'c-p-l60' , showProcessBar && (screenStatus == 2 || screenStatus == 3) ? 'c-p-b160' : (screenStatus == 5 || screenStatus == 4) ? 'c-p-t80' : 'c-p-b80']"
      class="c-pf c-pz100000">
      <div class="c-ww48 c-hh48 c-flex-row c-flex-center c-translucent-balck60 c-br30">
        <span class="icon iconfont c-fc-white c-fs32">&#xe97c;</span>
      </div>
    </div>
    <!-- 全屏的时候关注公众号标签 -->
    <div @click="clickPopupQr" v-transfer-dom v-if="showQrNotFollow"
      :class="[screenStatus == 1 ? 'hide' : screenStatus == 3 ? 'c-rotate90' : screenStatus == 4 ? 'c-rotate180' : screenStatus == 5 ? 'c-rotate270' : '', screenStatus == 2 ? 'c-p-r24' : screenStatus == 4 ? 'right480' : screenStatus == 5 ? 'c-p-r136' : 'c-p-l136' , showProcessBar && (screenStatus == 2 || screenStatus == 3) ? 'c-p-b160' : (screenStatus == 5 || screenStatus == 4) ? 'c-p-t80' : 'c-p-b80']"
      class="c-pf c-pz100000">
      <div class="c-ww48 c-hh48 c-flex-row c-flex-center c-translucent-balck60 c-br30">
        <span class="icon iconfont c-fc-white c-fs32">&#xe984;</span>
      </div>
    </div>
    <!-- 全屏的时候已关注公众号标签 -->
    <div v-transfer-dom v-if="showQrHasFollow"
      :class="[screenStatus == 1 ? 'hide' : screenStatus == 3 ? 'c-rotate90' : screenStatus == 4 ? 'c-rotate180' : screenStatus == 5 ? 'c-rotate270' : '', screenStatus == 2 ? 'c-p-r24' : screenStatus == 4 ? 'right480' : screenStatus == 5 ? 'c-p-r136' : 'c-p-l136' , showProcessBar && (screenStatus == 2 || screenStatus == 3) ? 'c-p-b160' : (screenStatus == 5 || screenStatus == 4) ? 'c-p-t80' : 'c-p-b80']"
      class="c-pf c-pz100000">
      <div class="c-ww48 c-hh48 c-flex-row c-flex-center c-translucent-balck60 c-br30">
        <span class="icon iconfont c-fc-white c-fs32">&#xe978;</span>
      </div>
    </div>
    <!-- 随堂互动测评 -->
    <div class="" v-if="showTest">
      <div class="c-pf c-p-t0 c-p-l0 c-p-b0 c-p-r0 c-translucent-balck60 c-pz100000"></div>
      <div class="c-pf c-p-t0 c-p-b0 c-p-lp50 center-tb c-bg-white c-table c-br20 c-text-hidden c-pz100000"
        :class="screenStatus == 3 ? 'c-rotate90' : screenStatus == 4 ? 'c-rotate180' : screenStatus == 5 ? 'c-rotate270' : ''"
        :style="screenStatus == 3 || screenStatus == 5 ? 'width: 20rem;margin-left: -10rem' : 'width: 13rem;margin-left: -6.5rem'">
        <div class="c-bg-white c-pt16 c-ph24" style="">
          <div class="c-fs28 c-fc-xblack c-textAlign-c c-pb32 c-text-ellipsis1">{{testInfo ? testInfo.paperName : ''}}</div>
          <div class="test-content" :class="screenStatus == 3 || screenStatus == 5 ? 'c-maxh310' : 'c-maxh500'" style="min-height: 7.75rem">
            <div>
              <template v-if="!hasSubmit && testInfo">
                <div class="c-textAlign-l c-lh48">
                  <span class="c-fs24 c-fc-xblack c-vcAlign-middle fl" v-if="testInfo.paperDetail.length > 1">{{answerIndex + 1}}/{{testInfo.paperDetail.length}}</span>
                  <span class="c-fs24 c-fc-xblack c-vcAlign-middle fl">【{{testInfo.paperDetail[answerIndex].type == 1 ? '单选题' : testInfo.paperDetail[answerIndex].type == 2 ? '多选题' : '判断题'}}】</span>
                  <span class="c-ww-bw c-fs24 c-fc-xblack c-vcAlign-middle" v-html="testInfo.paperDetail[answerIndex].problem"></span>
                </div>
                <template v-if="testInfo.paperDetail[answerIndex].type == 1 || testInfo.paperDetail[answerIndex].type == 2">
                  <div @click="clickOption(item.option)" class="c-flex-row c-aligni-center c-mt36 c-textAlign-l c-aligni-start" v-for="(item, index) in optionList" :key="index">
                    <div
                      :class="userAnswerArr[answerIndex] != undefined && userAnswerArr[answerIndex].userAnswer && userAnswerArr[answerIndex].userAnswer.indexOf(item.option) != -1 ? 'c-fc-white c-bg-blue' : 'c-fc-xblack c-bd1-ccc'"
                      class="c-fs24 c-ww40 c-hh40 c-textAlign-c c-lh42 c-br20 c-flex-shrink0">{{item.option}}</div>
                    <div class="c-fs24 c-fc-xblack c-ml20 c-lh42" v-html="item.name"></div>
                  </div>
                </template>
                <template v-if="testInfo.paperDetail[answerIndex].type == 4">
                  <div @click="clickRight" class="c-flex-row c-aligni-center c-mt36 c-textAlign-l c-aligni-start">
                    <div
                      :class="userAnswerArr[answerIndex] != undefined && userAnswerArr[answerIndex].userAnswer && userAnswerArr[answerIndex].userAnswer.indexOf('1') != -1 ? 'c-fc-white c-bg-blue' : 'c-fc-xblack c-bd1-ccc'"
                      class="c-fs24 c-ww40 c-hh40 c-textAlign-c c-lh42 c-br20 c-flex-shrink0"><span class="iconfont c-fs20">&#xe6ea;</span></div>
                    <div class="c-fs24 c-fc-xblack c-ml20 c-lh42">正确</div>
                  </div>
                  <div @click="clickWrong" class="c-flex-row c-aligni-center c-mt36 c-textAlign-l c-aligni-start">
                    <div
                      :class="userAnswerArr[answerIndex] != undefined && userAnswerArr[answerIndex].userAnswer && userAnswerArr[answerIndex].userAnswer.indexOf('0') != -1 ? 'c-fc-white c-bg-blue' : 'c-fc-xblack c-bd1-ccc'"
                      class="c-fs24 c-ww40 c-hh40 c-textAlign-c c-lh42 c-br20 c-flex-shrink0">X</div>
                    <div class="c-fs24 c-fc-xblack c-ml20 c-lh42">错误</div>
                  </div>
                </template>
              </template>
              <template v-else-if="hasSubmit && testInfo">
                <div :class="index == 0 ? '' : 'c-mt40'" v-for="(item, index) in testResult" :key="index">
                  <div class="c-textAlign-l c-lh48">
                    <span class="c-fs24 c-fc-xblack c-vcAlign-middle fl" v-if="testResult.length > 1">{{index + 1}}/{{testResult.length}}</span>
                    <span class="c-fs24 c-fc-xblack c-vcAlign-middle fl">【{{item.type == 1 ? '单选题' : item.type == 2 ? '多选题' : '判断题'}}】</span>
                    <span class="c-ww-bw c-fs24 c-fc-xblack c-vcAlign-middle" v-html="item.problem"></span>
                  </div>
                  <template v-if="item.type == 1 || item.type == 2">
                    <div :class="index == 0 ? 'c-mt20' : 'c-mt36'" class="c-flex-row c-aligni-center c-textAlign-l c-aligni-start" v-for="(sItem, sIndex) in item.optionList" :key="sIndex">
                      <div :class="item.answer.indexOf(sItem.option) != -1 ? 'c-fc-white c-bg-blue' : item.userAnswer.indexOf(sItem.option) != -1 ? 'c-fc-white c-bg-FF5355' : 'c-fc-xblack c-bd1-ccc'"
                        class="c-fs24 c-ww40 c-hh40 c-textAlign-c c-lh42 c-br20 c-flex-shrink0">{{sItem.option}}</div>
                      <div class="c-fs24 c-fc-xblack c-ml20 c-lh42" v-html="sItem.name"></div>
                    </div>
                  </template>
                  <template v-if="item.type == 4">
                    <div class="c-flex-row c-aligni-center c-mt20 c-textAlign-l c-aligni-start">
                      <div :class="item.answer == '1' ? 'c-fc-white c-bg-blue' : item.userAnswer == '1' ? 'c-fc-white c-bg-FF5355' : 'c-fc-xblack c-bd1-ccc'"
                        class="c-fs24 c-ww40 c-hh40 c-textAlign-c c-lh42 c-br20 c-flex-shrink0"><span class="iconfont c-fs20">&#xe6ea;</span></div>
                      <div class="c-fs24 c-fc-xblack c-ml20 c-lh42">正确</div>
                    </div>
                    <div class="c-flex-row c-aligni-center c-mt36 c-textAlign-l c-aligni-start">
                      <div :class="item.answer == '-1' ? 'c-fc-white c-bg-blue' : item.userAnswer == '-1' ? 'c-fc-white c-bg-FF5355' : 'c-fc-xblack c-bd1-ccc'"
                        class="c-fs24 c-ww40 c-hh40 c-textAlign-c c-lh42 c-br20 c-flex-shrink0">X</div>
                      <div class="c-fs24 c-fc-xblack c-ml20 c-lh42">错误</div>
                    </div>
                  </template>
                  <div class="c-fs24 c-mt32 c-textAlign-l" :class="item.isRight == 0 ? 'c-fc-mred' : 'c-fc-green'">{{item.isRight == 0 ? '很抱歉，您回答错误！' : '恭喜您，回答正确！'}}</div>
                  <div class="c-fs24 c-mt32 c-fc-xblack c-textAlign-l"><span class="c-fc-gray">正确答案：</span>{{item.type == 1 || item.type == 2 ? item.answer : (item.answer == '-1' ? '错误' : '正确')}}
                  </div>
                  <div class="c-fs24 c-mt32 c-fc-xblack c-textAlign-l"><span
                    class="c-fc-gray">您的答案：</span>{{item.type == 1 || item.type == 2 ? item.userAnswer : (item.userAnswer == '-1' ? '错误' : '正确')}}</div>
                  <div class="c-textAlign-l c-lh48 c-mt32">
                    <span class="c-fs24 c-fc-gray c-vcAlign-middle">解析：</span>
                    <span class="c-ww-bw c-fs24 c-fc-xblack c-vcAlign-middle" v-if="!item.analysis">暂无</span>
                    <span class="c-ww-bw c-fs24 c-fc-xblack c-vcAlign-middle" v-else v-html="item.analysis"></span>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div class="c-flex-row c-justify-center c-pt32 c-pb40" v-if="testInfo">
            <div @click="goPrev" v-if="answerIndex > 0 && !hasSubmit" class="c-fs24 c-fc-xblack c-textAlign-c c-ww180 c-hh64 c-lh68 c-bd1-gray c-mr40 c-br32">上一题</div>
            <div @click="goNext" v-if="answerIndex < testInfo.paperDetail.length - 1 && !hasSubmit" class="c-fs24 c-fc-white c-textAlign-c c-ww180 c-hh64 c-lh68 c-bg-blue c-br32">下一题</div>
            <div @click="testSubmit" v-if="answerIndex == testInfo.paperDetail.length - 1 && !hasSubmit" class="c-fs24 c-fc-white c-textAlign-c c-ww180 c-hh64 c-lh68 c-bg-blue c-br32">提交</div>
            <div @click="goOnWatch" v-if="hasSubmit" class="c-fs24 c-fc-white c-textAlign-c c-ww180 c-hh64 c-lh68 c-bg-blue c-br32">完成</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 随堂互动商品 -->
    <div class="" v-if="showInteractionGoods">
      <div class="c-pf c-p-t0 c-p-l0 c-p-b0 c-p-r0 c-translucent-balck60 c-pz100000"></div>
      <div class="c-pf c-p-t0 c-p-b0 c-p-l0 c-p-r0 center c-bg-white c-table c-br20 c-text-hidden c-pz100000 c-ww480"
        :class="screenStatus == 3 ? 'c-rotate90' : screenStatus == 4 ? 'c-rotate180' : screenStatus == 5 ? 'c-rotate270' : ''">
        <div class="c-bg-white c-pt16 c-ph24" style="">
          <div class="c-fs28 c-fc-xblack c-textAlign-c c-pb16">精选商品</div>
          <div class="c-p c-text-hidden c-contexty-scroll" :style="screenStatus == 3 || screenStatus == 5 ? 'max-height: 7rem' : 'max-height: 13.5rem;'">
            <img class="c-br12" :src="$addXossFilter(showGoodsInfo.goodsCover)" alt="">
            <p class="c-fs24 c-fc-xblack c-mt10 c-textAlign-l">{{showGoodsInfo.goodsName}}</p>
            <div class="c-fs24 theme-fc c-mt10 c-textAlign-l"><span
              v-if="Number(showGoodsInfo.goodsPrice) > 0">{{'￥' | iosPriceFilter}}</span><span>{{Number(showGoodsInfo.goodsPrice) > 0 ? showGoodsInfo.goodsPrice : '免费'}}</span></div>
          </div>
          <div class="c-flex-row c-justify-center c-pt32 c-pb40">
            <div @click="goOnWatch" class="c-fs24 c-fc-xblack c-textAlign-c c-ww180 c-hh64 c-lh68 c-bd1-gray c-br32">继续观看</div>
            <div @click="goBuy" class="c-fs24 c-fc-white c-textAlign-c c-ww180 c-hh64 c-lh68 theme-bg c-ml40 c-br32">立即购买</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 随堂互动知识点 -->
    <div class="" v-if="showKnowledge">
      <div @click="closeKnowledgePoint" class="c-pf c-p-t0 c-p-l0 c-p-b0 c-p-r0 c-translucent-balck60 c-pz100000"></div>
      <div class="c-pf c-bg-white c-table c-text-hidden c-pz100000 c-w100 c-maxw640"
        :class="screenStatus == 3 ? 'c-rotate90 c-br-bl20 c-br-tl20 c-p-b0' : screenStatus == 5 ? 'c-rotate270 c-br-bl20 c-br-tl20 c-p-t0' : screenStatus == 4 ? 'c-rotate180 c-br-tr20 c-br-tl20 c-p-t0' : 'c-br-tr20 c-br-tl20 c-p-b0'"
        :style="(screenStatus == 3 || screenStatus == 5) ? ('height:' + cw + 'px') : ''">
        <div class="c-ph24">
          <div class="c-fs28 c-fc-xblack c-textAlign-c c-pv16 c-bd-b1-f5">知识点</div>
          <div class="c-pt20 c-pl12 c-pb48 c-maxh500 c-contexty-scroll">
            <div v-for="(item, index) in knowledgePoints" :key="index" @click="goPoints(item.start, item.id)" class="c-flex-row c-aligni-center c-pv24 c-pl20 c-bd-l1-ccc c-p">
              <div class="c-fs24 c-fc-sblack c-w25 c-flex-shrink0">知识点{{index+1}}</div>
              <div class="c-fs24 c-fc-xblack c-flex-grow1 c-text-ellipsis2">{{item.label}}</div>
              <div class="c-w23 c-textAlign-r c-flex-row c-justify-end c-aligni-center c-flex-shrink0">
                <span class="c-fs24 c-fc-gray">{{item.timeAt}}</span>
                <span class="c-fs28 c-fc-gray iconfont c-ml12">&#xe747;</span>
              </div>
              <div class="c-pa c-ww24 c-hh24 c-br24 c-bd1-ccc l-13 c-flex-row c-flex-center c-bg-white">
                <div class="c-ww12 c-hh12 c-br12 theme-bg"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 关注公众号 -->
    <div v-if="showQr && qrInfo" class="">
      <div @click="closeQr" class="c-pf c-p-t0 c-p-l0 c-p-b0 c-p-r0 c-translucent-balck60 c-pz100000"></div>
      <div class="c-pf c-p-t0 c-p-b0 c-p-l0 c-p-r0 center c-bg-white c-table c-br20 c-text-hidden c-pz100000 c-ww480"
        :class="screenStatus == 3 ? 'c-rotate90' : screenStatus == 4 ? 'c-rotate180' : screenStatus == 5 ? 'c-rotate270' : ''">
        <div class="c-bg-white c-pv36 c-ph24 c-p" style="">
          <div class="c-fs28 c-fc-xblack c-textAlign-c c-text-ellipsis1">关注{{qrInfo.mpName}}公众号</div>
          <img @error="imgError" class="c-center c-ww240 c-mt36" v-if="qrInfo.mpQrcode" :src="$addXossFilter(qrInfo.mpQrcode)" alt="">
          <div v-else class="c-center c-ww240 c-hh240 c-bg-white c-mt36"></div>
          <div class="c-textAlign-c c-fs24 c-fc-gray c-mt20">长按识别二维码关注公众号</div>
          <div @click="closeQr" :class="screenStatus == 3 ? 'c-p-r40' : 'c-p-r20'" class="c-pa c-fs24 c-fc-gray c-p-t20 icon iconfont">&#xe8fd;</div>
        </div>
      </div>
    </div>
    <!-- 随堂互动重点和随堂测试商品标记（全屏的时候） -->
    <div v-transfer-dom v-if="(showGoods || showKeyPoint1) && screenStatus != 1" class="c-ww280 c-flex-column c-justify-end c-aligni-start c-hh190"
      :class="[!showProcessBar && screenStatus == 1 ? 'top200 c-p-l20' : (!showProcessBar && screenStatus == 2) ? 'c-p-b60 c-p-l20' : (showProcessBar && screenStatus == 2) ? 'c-p-b140 c-p-l20' : screenStatus == 3 ? 'c-p-t160 c-p-l38' : screenStatus == 4 ? 'c-p-t60 c-p-r20' : (screenStatus == 5 && !showProcessBar) ? 'c-p-b160 c-p-r38' : (screenStatus == 5 && showProcessBar) ? 'c-p-b200 c-p-r38' : 'top120 c-p-l20', showInteractionGoods ? 'c-pz10000' : 'c-pz100000']"
      :style="screenStatus == 3 ? 'transform: rotate(90deg) scale(1);position: fixed;' : screenStatus == 4 ? 'transform: rotate(180deg) scale(1);position: fixed;' : screenStatus == 5 ? 'transform: rotate(270deg) scale(1);position: fixed;' : screenStatus == 1 ? 'position: absolute;' : 'position: fixed;'">
      <!-- 随堂互动重点 -->
      <div v-if="showKeyPoint1" class="maxW280 c-pv10 c-ph10 c-br8 bg-kp c-bd1-mgray c-box-shadow6">
        <div class="c-ww-bw c-wb-ba c-fs20 c-fc-white c-text-ellipsis2 c-lh32 ">{{keyPointInfo ? keyPointInfo.content: ''}}</div>
      </div>
      <!-- 随堂测试商品标记 -->
      <div v-if="showGoods" @click="showGoodsDetail" class="c-mt12 c-ww280 c-hh84 c-pv10 c-ph10 c-br8 c-flex-row c-bg-white c-bd1-mgray c-box-shadow6">
        <div class="c-ww64 c-hh64 c-text-hidden c-flex-shrink0">
          <img :src="$addXossFilter(showGoodsInfo.goodsCover)" alt="">
        </div>
        <div class="c-flex-column c-justify-sb c-ml10 c-w0 c-flex-grow1">
          <div class="c-fs20 c-fc-xblack c-text-ellipsis1">{{showGoodsInfo.goodsName}}</div>
          <div class="c-fs24 c-fc-sorange"><span
            v-if="Number(showGoodsInfo.goodsPrice) > 0">{{'￥' | iosPriceFilter}}</span><span>{{Number(showGoodsInfo.goodsPrice) > 0 ? showGoodsInfo.goodsPrice : '免费'}}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
// import Bscroll from 'better-scroll'

let isCommitAnswer = false;
let startTestTime = 0;
// let scrollObj = null;
export default {
  name: "Interaction",
  components: {},
  props: {
    hasPermission: {
      type: Boolean,
      default: false
    },
    screenStatus: {
      type: Number,
      default: 1 //1非全屏，2全屏未旋转，3全屏旋转90度，4全屏旋转180度，5全屏旋转270度
    },
    showFsKnowledgeTag: {
      type: Boolean,
      default: false
    },
    tInteractItem: {
      type: Object,
      default: null
    },
    currentPlayTime: {
      type: Number,
      default: 0
    },
    prodId: {
      type: Number,
      default: 0
    },
    prodType: {
      type: Number,
      default: 110
    },
    showQrNotFollow: {
      type: Boolean,
      default: false
    },
    showQrHasFollow: {
      type: Boolean,
      default: false
    },
    showProcessBar: {
      type: Boolean,
      default: true
    },
    interactId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      cw: document.body.clientWidth,
      answerIndex: 0,
      userAnswerArr: [],
      testResult: [],
      hasSubmit: false,
      showKnowledge: false,
      knowledgePoints: [],
      interactionArr1: [],
      showInteractionGoods: false,
      showGoodsInfo: null,
      showTest: false,
      testInfo: null,
      optionList: [],
      keyPointInfo: null,
      qrImg: localStorage.getItem(`gzqr${localStorage.getItem("companyId")}`),
      showQr: false,
      qrInfo: null,
      showKeyPoint1: false,
      showGoods: false
    };
  },
  created() {
  },
  activated() {
    this.answerIndex = 0;
    this.userAnswerArr = [];
    this.testResult = [];
    this.hasSubmit = false;
    this.showKnowledge = false;
    this.knowledgePoints = [];
    this.interactionArr1 = [];
    this.showInteractionGoods = false;
    this.showGoodsInfo = null;
    this.showTest = false;
    this.testInfo = null;
    this.optionList = [];
    this.keyPointInfo = null;
    this.showQr = false;
    this.qrInfo = null;
    this.showKeyPoint1 = false;
    this.showGoods = false;
  },
  watch: {
    tInteractItem: function (tInteract) {
      if (tInteract) {
        this.knowledgePoints = tInteract.labels;
        this.interactionArr1 = tInteract.content;
        if (this.knowledgePoints.length > 0) {
          for (let k = 0; k < this.knowledgePoints.length; k++) {
            let mins = Math.floor(this.knowledgePoints[k].start / 60) > 9 ? Math.floor(this.knowledgePoints[k].start / 60) : ('0' + Math.floor(this.knowledgePoints[k].start / 60));
            let seconds = Math.floor(this.knowledgePoints[k].start % 60) > 9 ? Math.floor(this.knowledgePoints[k].start % 60) : ('0' + Math.floor(this.knowledgePoints[k].start % 60));
            this.knowledgePoints[k].timeAt = mins + ':' + seconds;
          }
        }
      } else {
        this.knowledgePoints = [];
        this.interactionArr1 = [];
      }
    },
    currentPlayTime: function (cTime) {
      let currentEvs = [];
      for (let t = 0; t < this.interactionArr1.length; t++) {
        const START_TIME = this.interactionArr1[t].start;
        if ((this.interactionArr1[t].type == 1 || this.interactionArr1[t].type == 3) && START_TIME < cTime && this.interactionArr1[t].end > cTime) {
          currentEvs.push(this.interactionArr1[t]);
        }
        if (this.interactionArr1[t].type == 2 && START_TIME == Math.floor(cTime) && !this.interactionArr1[t].hasTest) {
          this.interactionArr1[t].hasTest = true; //避免同一测试重复弹出
          currentEvs.push(this.interactionArr1[t]);
        }
        //如果不在测试区间(前面误差6s为关键帧，在跳转的时候可能会差6s)，重置测试状态
        if (this.interactionArr1[t].type == 2 && (Math.floor(cTime) < START_TIME - 6 || Math.floor(cTime) > START_TIME + 1)) {
          this.interactionArr1[t].hasTest = false;
        }
      }
      if (currentEvs.length > 0) {
        for (let i = 0; i < currentEvs.length; i++) {
          if (currentEvs[i].type == 1) {
            this.testInfo = null;
            this.showTest = false;
            this.showGoodsInfo = currentEvs[i];
            this.popGoods();
            this.showGoods = true;
            this.$emit('showGoodsTag', this.showGoodsInfo)
          } else if (currentEvs[i].type == 2) {
            this.showKnowledge = false;
            // this.tenObj.pause();
            this.$emit('playPause')
            this.showGoodsInfo = null;
            this.showGoods = false;
            this.testInfo = currentEvs[i];
            this.optionList = [];
            if (this.testInfo.paperDetail[0].type == 1 || this.testInfo.paperDetail[0].type == 2) {
              let options = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
              for (let k = 0; k < options.length; k++) {
                if (this.testInfo.paperDetail[0]['option' + options[k]]) {
                  this.optionList.push({
                    option: options[k],
                    name: this.testInfo.paperDetail[0]['option' + options[k]]
                  })
                }
              }
            }
            this.showTest = true;
            startTestTime = utilJs.getNowTime();
            // this.$nextTick(function () {
            //   let wrapper = document.querySelector('.wrapper');
            //   scrollObj = new Bscroll(wrapper, {
            //     scrollbar: {
            //       fade: false
            //     },
            //     click: true,
            //     tap: true,
            //     scrollX: false,
            //     scrollY: true
            //   })
            // })
            this.$emit('hideGoodsTag')
          } else if (currentEvs[i].type == 3) {
            this.keyPointInfo = currentEvs[i];
            this.showKeyPoint1 = true;
            this.$emit('showKeyPointFc', this.keyPointInfo)
          }
        }
      } else {
        this.showGoodsInfo = null;
        this.showGoods = false;
        this.showInteractionGoods = false;
        this.showKeyPoint1 = false;
        this.$emit('hideGoodsTag')
        this.$emit('hideKeyPoint')
      }
    },
    showQrNotFollow: function (val) {
      if (val) {
        let getUrl = `${global.apiurl}classInteract/getMpData?interactId=${this.interactId}`;
        utilJs.getMethod(getUrl, res => {
          this.qrInfo = res;
        })
      }
    }
  },
  methods: {
    popGoods() { //播放时每次有商品推荐的时候请求 同个商品只有第一次的时候请求
      if (!this.showGoods) {
        let postUrl = `${global.apiurl}analysis/course/courseClickStat`;
        let data = {
          prodId: this.prodId,
          detailId: this.tInteractItem.courseDetailId,
          detailType: this.prodType,
          isClass: 1,
          goodsId: this.showGoodsInfo.content
        }
        utilJs.postMethod(postUrl, data, res => {
        });
      }
    },
    showGoodsDetail() {
      this.$emit('showGoodsDetail')
    },
    clickPopupQr() {
      if (this.qrInfo) {
        this.showQr = true;
        this.$emit('playPause')
      }
    },
    seeKnowledgePoint() {
      this.showKnowledge = true;
      // this.$emit('seeKnowledgePoint');
    },
    closeKnowledgePoint() {
      this.showKnowledge = false;
      // this.$emit('closeKnowledgePoint');
    },
    closeQr() {
      this.showQr = false;
      this.$emit('goOnWatch')
    },
    goPoints(pointStart, pointId) {
      this.interactClick(3, pointId);
      this.$emit('goPoints', pointStart)
    },
    goOnWatch() {
      this.answerIndex = 0;
      this.userAnswerArr = [];
      this.testResult = [];
      this.hasSubmit = false;
      this.testInfo = null;
      this.optionList = [];
      this.$emit('goOnWatch')
      this.showInteractionGoods = false;
      this.showTest = false;
      // if (scrollObj) {
      //   scrollObj.destroy();
      //   scrollObj = null;
      // }
    },
    // goBuy() {
    //   this.$emit('goBuy')
    // },
    interactClick(itemType, itemId) { //随堂互动点击商品或者知识点的时候请求
      let postUrl = `${global.apiurl}analysis/course/classInteractClickLog`;
      let data = {
        prodId: this.prodId,
        detailId: this.tInteractItem.courseDetailId,
        detailType: this.prodType,
        itemType: itemType,
        itemId: itemId
      }
      utilJs.postMethod(postUrl, data, res => {
      });
    },
    goBuy() {
      this.showGoods = false;
      this.showTest = false;
      this.showInteractionGoods = false;
      this.interactClick(1, this.showGoodsInfo.content);
      this.$routerGo(this, "push", {
        path: "/mall/shopDetail/shopDetail",
        query: { shopNo: this.showGoodsInfo.content, isFromInteract: 1, interactDetailId: this.tInteractItem.interactDetailId }
      });
    },
    clickOption(op) {
      if (this.testInfo.paperDetail[this.answerIndex].type == 1) { //单选
        Vue.set(this.userAnswerArr, this.answerIndex, {
          paperDetailId: this.testInfo.paperDetail[this.answerIndex].paperDetailId,
          userAnswer: op
        })
      } else if (this.testInfo.paperDetail[this.answerIndex].type == 2) { //多选
        if (this.userAnswerArr[this.answerIndex] == undefined) {
          Vue.set(this.userAnswerArr, this.answerIndex, {
            paperDetailId: this.testInfo.paperDetail[this.answerIndex].paperDetailId,
            userAnswer: op
          })
        } else if (this.userAnswerArr[this.answerIndex] != undefined && this.userAnswerArr[this.answerIndex].userAnswer.indexOf(op) == -1) {
          let opTemp = (this.userAnswerArr[this.answerIndex].userAnswer + op).split("").sort().join(""); //按字母表顺序排序
          Vue.set(this.userAnswerArr, this.answerIndex, {
            paperDetailId: this.testInfo.paperDetail[this.answerIndex].paperDetailId,
            userAnswer: opTemp
          })
        } else if (this.userAnswerArr[this.answerIndex] != undefined && this.userAnswerArr[this.answerIndex].userAnswer.indexOf(op) != -1) {
          let opTemp = this.userAnswerArr[this.answerIndex].userAnswer.replace(op, "");
          Vue.set(this.userAnswerArr, this.answerIndex, {
            paperDetailId: this.testInfo.paperDetail[this.answerIndex].paperDetailId,
            userAnswer: opTemp
          })
        }
      }
    },
    clickRight() {
      Vue.set(this.userAnswerArr, this.answerIndex, {
        paperDetailId: this.testInfo.paperDetail[this.answerIndex].paperDetailId,
        userAnswer: '1'
      })
    },
    clickWrong() {
      Vue.set(this.userAnswerArr, this.answerIndex, {
        paperDetailId: this.testInfo.paperDetail[this.answerIndex].paperDetailId,
        userAnswer: '0'
      })
    },
    goNext() {
      if (this.userAnswerArr[this.answerIndex] == undefined || !this.userAnswerArr[this.answerIndex].userAnswer) {
        this.$showCjToast({
          text: "请选择答案",
          type: "warn",
          time: 1000
        });
        return;
      }
      this.answerIndex++;
      this.optionList = [];
      if (this.testInfo.paperDetail[this.answerIndex].type == 1 || this.testInfo.paperDetail[this.answerIndex].type == 2) {
        let options = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
        for (let k = 0; k < options.length; k++) {
          if (this.testInfo.paperDetail[this.answerIndex]['option' + options[k]]) {
            this.optionList.push({
              option: options[k],
              name: this.testInfo.paperDetail[this.answerIndex]['option' + options[k]]
            })
          }
        }
      }
      this.$nextTick(res => {
        document.querySelector(".test-content").scrollTo(0, 0);
      })
    },
    goPrev() {
      this.answerIndex--;
      this.optionList = [];
      if (this.testInfo.paperDetail[this.answerIndex].type == 1 || this.testInfo.paperDetail[this.answerIndex].type == 2) {
        let options = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
        for (let k = 0; k < options.length; k++) {
          if (this.testInfo.paperDetail[this.answerIndex]['option' + options[k]]) {
            this.optionList.push({
              option: options[k],
              name: this.testInfo.paperDetail[this.answerIndex]['option' + options[k]]
            })
          }
        }
      }
      this.$nextTick(res => {
        document.querySelector(".test-content").scrollTo(0, 0);
      })
    },
    testSubmit() {
      if (this.userAnswerArr[this.answerIndex] == undefined || !this.userAnswerArr[this.answerIndex].userAnswer) {
        this.$showCjToast({
          text: "请选择答案",
          type: "warn",
          time: 1000
        });
        return;
      }
      if (isCommitAnswer) {
        return
      }
      isCommitAnswer = true;
      let postData = {
        answerPaperArr: this.userAnswerArr,
        paperMainId: this.testInfo.content,
        startTime: startTestTime
      };
      utilJs.postMethod(global.apiurl + 'classInteract/submitTestPaper', postData, res => {
        this.getTestResult();
      }, () => {
        isCommitAnswer = false;
      })
    },
    getTestResult() {
      this.$loading.show({
        text: "正在获取测试结果"
      });
      utilJs.getMethod(global.apiurl + 'classInteract/answerDisplay?paperMainId=' + this.testInfo.content, res => {
        this.testResult = res;
        for (let i = 0; i < this.testResult.length; i++) {
          if (this.testResult[i].type == 1 || this.testResult[i].type == 2) {
            let options = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
            this.testResult[i].optionList = [];
            for (let k = 0; k < options.length; k++) {
              if (this.testResult[i]['option' + options[k]]) {
                this.testResult[i].optionList.push({
                  option: options[k],
                  name: this.testResult[i]['option' + options[k]]
                })
              }
            }
          }
        }
        this.hasSubmit = true;
        this.$loading.hide();
        isCommitAnswer = false;
        this.$nextTick(res => {
          document.querySelector(".test-content").scrollTo(0, 0);
        })
      }, () => {
        this.$loading.hide();
        isCommitAnswer = false;
      })
    },
    imgError() {
      if (this.qrInfo) {
        this.qrInfo.mpQrcode = this.qrImg;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.center-tb {
  margin-top: auto;
  margin-bottom: auto;
}
.center {
  margin: auto;
}
.l-13 {
  left: -0.325rem;
}
.bscroll-vertical-scrollbar {
  bottom: 2rem !important;
  top: 2rem !important;
  width: 5px !important;
}
/* 滚动条样式 */
.test-content {
  overflow: auto;
  /* overflow-y: auto;
  -webkit-overflow-scrolling: touch !important; */
}
.test-content::-webkit-scrollbar {
  /*滚动条整体*/
  display: inline !important;
  width: 4px;
}
.test-content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-content::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  /* -webkit-box-shadow: inset 0 0 5px #DDDDDD; */
  background: #ccc !important;
}
.test-content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /* -webkit-box-shadow: inset 0 0 5px #F5F5F5; */
  /* border-radius: 10px; */
  background: #fff;
}
.right400 {
  right: 10rem;
}
.right480 {
  right: 12rem;
}
</style>